<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery.min.js"></script>
    <link rel="stylesheet" href="lib/bootstrap-3.3.7-dist/css/bootstrap.css">
    <script src="js/HttpUtil.js"></script>
</head>
<body>
<ul class="nav nav-pills navbar navbar-inverse"  >
    <li role="presentation" ><a href="#">首页</a></li>
    <li role="presentation"><a href="http://localhost:8080/gs/owner.html">业主信息管理</a></li>
    <li role="presentation"><a href="#">人员列表</a></li>
    <button type="button" class="btn btn-primary" style="float: right;margin-top: 5px">
        <span class="glyphicon glyphicon-refresh" aria-hidden="true" ></span>
    </button>
</ul>
<div>
    <span style=" float:left;margin-left: 350px;margin-top: 105px;text-align: center;border: solid 1px #ccc;width: 110px;
height: 40px;line-height: 40px;color: #c0c4cc">日期范围</span>
</div>
<div>
    <div class="input-group input-group-addon" style="width: 250px; float:left;margin-left: 10px;margin-top: 100px" id="start">
        <input type="text" class="form-control" placeholder="开始日" aria-describedby="basic-addon1">
    </div>

    <div class="input-group input-group-addon" style="width: 250px ;float:left;margin-left: 10px;margin-top: 100px" id="end">
        <input type="text" class="form-control" placeholder="截止日" aria-describedby="basic-addon2">
    </div>
    <div class="input-group input-group-addon" style="width: 250px;float:left;margin-left: 10px;margin-top: 100px" id="searchByKeyWords">
        <input type="text" class="form-control" placeholder="标题" aria-describedby="sizing-addon3">
    </div>
    <button type="button" class="btn btn-primary" style="margin-top: 105px;margin-left: 10px;float: left" onclick="findOwner()">
        <span class="glyphicon glyphicon-search" aria-hidden="true"></span>
    </button>
</div>
<div style="width: 1000px;height: 150px">
    <button type="button" class="btn btn-danger" style="margin-top: 30px;margin-left: 50px;">
        <span class="glyphicon glyphicon-trash" aria-hidden="true"></span>
        批量删除
    </button>
    <button type="button" class="btn btn-primary" style="margin-top: 30px;margin-left: 10px;">
        <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
        添加
    </button>
</div>
<div style="width: 1500px; margin-top: 100px;">
    <table id="tb" cellpadding="0" cellspacing="0" border="solid 1px black" width="1400px" hight="1500px" class="table table-hover">
        <thead id="hide_tbody">
        <th>勾选框</th>
        <th>ID</th>
        <th>所属小区</th>
        <th>所属房产</th>
        <th>成员名称</th>
        <th>成员照片</th>
        <th>身份证号</th>
        <th>联系方式</th>
        <th>职业</th>
        <th>出生日期</th>
        <th>性别</th>
        <th>成员类型</th>
        <th>备注</th>
        <th>创建时间</th>
        <th>操作</th>
        </thead>
        <tbody id="tbody">
        <td><button  class="btn btn-default" onclick="chooseIds()">
            <span class="glyphicon glyphicon-ok" aria-hidden="true" style="display: none" id="gou"></span>
        </button></td>
        <td>ID</td>
        <td>所属小区</td>
        <td>所属房产</td>
        <td>成员名称</td>
        <td><img src="#"  alt="找不到" class="img-rounded" style=" width:50px; height:50px"></td>
        <td>身份证号</td>
        <td>联系方式</td>
        <td>职业</td>
        <td>出生日期</td>
        <td>性别</td>
        <td>成员类型</td>
        <td>备注</td>
        <td>创建时间</td>
        <td>
            <button>
                <span class="glyphicon glyphicon-edit" aria-hidden="true"></span>
            </button>
            <button>
                <span class="glyphicon glyphicon-trash" aria-hidden="true"></span>
            </button>
        </td>
        </tbody>
    </table>
</div>
<script>
    function getUrlParam(key){
        // 获取参数
        var url = window.location.search;
        // 正则筛选地址栏
        var reg = new RegExp("(^|&)"+ key+"=([^&]*)(&|$)");
        // 匹配目标参数
        var result = url.substr(1).match(reg);
        //返回参数值
        return result ? decodeURIComponent(result[2]) : null;
    }

    $(function () {
        showAllOwners();
    });
    function showAllOwners() {
        let url="owner/selectManagement";
        let params;
        if (getUrlParam("start")&&getUrlParam("end")!=null) {
            params={creatTime:getUrlParam("start"),updateTime:getUrlParam("end"),ownerName:getUrlParam("searchByKeyWords")};
        } else {
            params={ownerName:getUrlParam("searchByKeyWords")};
        }

        httpGet(url,params,function (resp) {
            showBySearch(resp);
        })
        function showBySearch(owners) {
            let threadHtml=$("#tbody").html();
            let ownersListHtml="";
            let typeOwnerHtml="";
            $.each(owners,function (index,owner) {
                typeOwnerHtml= threadHtml.replace("ID",owner.ownerId)
                    .replace("所属小区",owner.ownerCommunityId)
                    .replace("所属房产",owner. ownerHouseId)
                    .replace("成员名称",owner.ownerName)
                    .replace("#",owner.ownerPic)
                    .replace("身份证号",owner.ownerNo)
                    .replace("联系方式",owner.ownerConnect)
                    .replace("职业",owner.ownerWork)
                    .replace("出生日期",owner.ownerBirth)
                    .replace("性别",owner.ownerGender)
                    .replace("成员类型",owner.ownerType)
                    .replace("备注",owner.ownerRemarks)
                    .replace("创建时间",owner.creatTime);
                ownersListHtml+=typeOwnerHtml;
            });
            $("#tbody").html(ownersListHtml);
        }
    }
</script>
</body>
</body>
</html>